

<!-- 消息列表 -->
<template>
	<view class="content">
		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="通知消息" rightBtnType="msgCenter" colorTheme="black" @toggleMenuListHandler="toggleMenuListHandler">
			</navHeader>
		</view>
		<view v-if="detail && detail.length">
			<view class="msg_one" @click="navTo('noticeDetail',item)" v-for="item of detail">
				<view class="left">
					<view class="red" :style="{background: item.cnStatus == 0 ? '#FE5E49' : '#DBDBDB'}"></view>
				</view>
				<view class="right">
					<view class="title-time">
						<view class="title">{{item.cnTitle}}</view>
						<view class="time">{{item.cnTime}}</view>
					</view>
					<view class="detail ellipsis2">
						<rich-text :nodes="item.cnDet"></rich-text>
					</view>
				</view>
			</view>
		</view>
		<g-empty v-else></g-empty>
		
		<!-- 详情菜单 -->
		<view v-if="showDetailMenu" @click="toggleMenuListHandler()" class="detailMenu-Container">
			<detailMenu></detailMenu>
		</view>
	</view>
</template>

<script>
	import navHeader from '@/components/nav-header/nav-header';
	import detailMenu from "@/components/detailMenu/detailMenu";
	export default {
		components: {navHeader,detailMenu},
		data() {
			return {
				icon: {
				},
				type:'',
				detail:[],
				showDetailMenu:false
			};
		},
		onLoad(option) {
			this.type = option.type
		},
		onShow() {
			let that = this;
			this.$api.globalUtil.requestAjax({
				url: '/customerNoticeApi/customerNoticeListApi',
				method: 'POST',
				data: {
					cnType: that.type,
					cnStatus: ''
				},
				success: function(res) {
					for(let i of res.data.response){
						i.cnTime = that.timestampToTime(i.cnTime);
					}
					that.detail = res.data.response || [];
					console.log(that.detail)
					//res.data.response ? that.detail = res.data.response:'';
				}
			});
		},
		methods: {
			
			// 时间戳转换日期--补0--毫秒
			timestampToTime(timestamp) {
				var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
				var D = date.getDate() < 10 ?  '0'+date.getDate()+ ' ' : date.getDate()+ ' ';
				var h = date.getHours() < 10 ? '0'+date.getHours()+ ':' : date.getHours()+ ':';
				var m = date.getMinutes() < 10 ? '0'+date.getMinutes()+ ':' : date.getMinutes()+ ':';
				var s = date.getSeconds()< 10 ? '0'+date.getSeconds() : date.getSeconds();
				return Y+M+D+h+m+s;
			},
			//详情菜单
			toggleMenuListHandler() {
				this.showDetailMenu = !this.showDetailMenu;
			},
			navTo(url,item){
				let data = JSON.stringify(item);
				uni.navigateTo({
					url: url+'?data='+data
				})
			}
		}
	}
</script>

<style scoped lang="less">
	page,
	.content {
		background: #F5F5F5;
		height: 100%;
	}
	.msg_one{
		width: 100%;
		height: 163rpx;
		border-radius: 16rpx;
		background-color: white;
		display: flex;
		margin-top: 20rpx;
		.left{
			width: 59rpx;
			display: flex;
			justify-content: center;
		    padding-top: 36rpx;
			.red{
				
				width: 12rpx;
				height: 12rpx;
				border-radius: 6rpx;
			}
		}
		.right{
			width: 622rpx;
			.title-time{
				width: 100%;
				height: 78rpx;
				.title{
					float: left;
					color: #333;
					font-size: 26rpx;
					padding-top: 25rpx;
				}
				.time{
					padding-top: 30rpx;
					float: right;
					color: #999;
					font-size: 20rpx;
				}
			}
			.detail{
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	/* header部分 */
	.header-Container {
		width: 100%;
		height: 176rpx;
		overflow: hidden;
		box-shadow: 0px 1rpx 1rpx 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);
	
		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
	
			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}

</style>



